<template>
  <div class='wrap'>

    <img :src='defaultSong.img' class='imgs'>

    <van-slider
      v-model="slideValue"
      class='slider'
      @change="onChange"
    />

    <div class='name'>
      {{defaultSong.name}}
    </div>
    <div class='singer'>
      {{defaultSong.singer}}
    </div>
    <van-row>
      <van-col span="8">
        <van-icon
          name="arrow-left"
          @click='preBtn'
          class='arrow'
          size='2rem'
        />
      </van-col>
      <van-col span="8">
        <van-icon
          :name="playBtnName"
          @click='playBtn'
          class='play'
          size='2rem'
        />
      </van-col>
      <van-col span="8">
        <van-icon
          name="arrow"
          @click='nextBtn'
          class='arrow'
          size='2rem'
        />
      </van-col>
    </van-row>

    <van-collapse v-model="activeNames">
      <van-collapse-item title="歌曲列表" name="1" style='padding:1px'>
        <div class='list'>
          <ul>
            <li
              v-for='(item, index) in musicList'
              :key='index'
              @click='clickSong(index)'
            >
              <i class='listNum'>({{index+1}})</i>
              <label class='listImg'><img :src="item.img" height='40px' width='40px'></label>
              <span class='listName'>{{item.name}}</span>
            </li>
          </ul>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'temp',
  data () {
    return {
      images: [],
      slideValue: 0,
      activeNames: ['1'],
      musicList: [],
      onPlay: true, // 按钮标识
      musicNum: 0,
      defaultSong: '',
      media: '',
      timer: '',
      aa: ''
    }
  },
  computed: {
    playBtnName () {
      return this.onPlay ? 'play' : 'pause' // 变更播放按钮
    }
  },
  created () {
    axios.get(' https://www.easy-mock.com/mock/5c05e6f48da5aa5aaa8b5f18/vue-fm/vue-fm')
      .then((res) => {
        this.musicList = res.data.music
        this.defaultSong = this.musicList[0]
        this.media = new Audio()
        this.media.src = this.musicList[this.musicNum].url
      })
  },
  methods: {
    onChange (value) {
      this.media.currentTime = value / 100 * this.media.duration
      this.media.play()
      this.onPlay = false
    },
    playBtn () {
      if (this.onPlay) {
        this.media.play()
        this.onPlay = false
        this.defaultSong = this.musicList[this.musicNum]
        this.timer = setInterval(() => {
          this.aa++
        }, 1000)
      } else {
        this.media.pause()
        this.onPlay = true
        clearInterval(this.timer)
      }
    },
    nextBtn () {
      this.musicNum++
      if (this.musicNum > this.musicList.length - 1) {
        this.musicNum = 0
      }
      this.switchSong()
    },
    preBtn () {
      this.musicNum--
      if (this.musicNum < 0) {
        this.musicNum = this.musicList.length - 1
      }
      this.switchSong()
    },
    clickSong (index) {
      this.musicNum = index
      this.switchSong()
    },
    switchSong () {
      this.media.src = this.musicList[this.musicNum].url
      this.media.play()
      this.defaultSong = this.musicList[this.musicNum]
      this.onPlay = false
      this.slideValue = 0
    }
  },
  watch: {
    aa () {
      this.slideValue = Math.round((this.media.currentTime / this.media.duration) * 100)
    }
  }
}
</script>

<style scoped>
body{
  background: #eee;
}
.wrap {
  background: #ddd;
  margin: 1rem;
  width: 23rem;
  height: 30rem;
}
.imgs{
  width: 21rem;
  height: 13.3rem;
}
.slider{
  margin-top:0.5rem;
  margin-bottom: 0.5rem;
}
.name{
  margin-top: 1rem;
}
.singer{
  margin-top: 1rem;
}
.play{
  margin-top: 1rem;
}
.arrow{
  margin-top: 1rem;
}
.list{
  padding: 0;
}
.list ul{
  list-style-type: none;
}
.list li{
  height: 3rem;
  margin-top: 0.4rem;
}
.list i{
  float: left;
  line-height: 3rem;
}
.list label{
  float: left;
  margin-left: 0.5rem;
}
.list span{
  line-height: 3rem;
  float: left;
  margin-left: 3rem;
}
.list img {
  border-radius: 0.6em;
  border:1px solid #333;
}
</style>
